<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>邮件设置</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
      div.q-if-inner div.q-input-target {line-height: 24px}  /* 兼容 ie 的 */
    </style>
  </head>
  <body>
    <div id="q-stageSetting" v-cloak class="q-pa-sm">
      <q-card class="bg-white no-shadow full-width">
        <q-card-main>
          <div class="row justify-end">
            <q-btn 
              color="primary" 
              style="font-size:14px"
              @click="saveHandler"
              :loading="btnLoading"
            >
              <q-icon name="save"></q-icon>
              <span>保存</span>
            </q-btn>
          </div>
          <q-table
            class="no-shadow"
            :data="data"
            dense
            :columns="columns"
            :loading = "listLoading"
            row-key="name"
            hide-bottom
            :pagination.sync="pagination"
            :rows-per-page-options="[0]"
          >
          <!-- 取消默认分页 -->
          <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
              第
              <q-pagination
                v-model="pagination.page"
                input
                boundary-links
                direction-links
                color="secondary"
                :ellipses="true"
                :max="1"></q-pagination>
              页 &nbsp; 共 {{ total }} 条
            </div>
            <template slot="body" slot-scope="props">
              <q-tr
                :props="props"
              >
              <!-- 遍历表头数据 确定渲染的列数  并为下面的checkbox 的value可以动态取到键 -->
                <q-td v-for="(item,index) in columns" :key="item.name" :props="props">
                  <div v-if="index == 0">{{ props.row[item.field] }}</div>
                  <q-checkbox v-else v-model="selection" :val="props.row[item.field]" label="" ></q-checkbox>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-main>
      </q-card>
    </div>
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/stageSetting.js"></script>
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email

      var emailSetting = new Vue({
        el: '#q-stageSetting',
        i18n: i18n,
        data: function () {
          return {
            data: [],
            pagination: {
              page: 1,
              rowsPerPage: 0
            },
            headerData: [],
            total: 0,
            listLoading: false,
            btnLoading: false,
            selection: []
          }
        },
        computed: {
          // 表格配置
          columns: function() {
            console.log(this.headerData);
            var _headerArr = []
            this.headerData.map(function(item) {
              var _obj = {}
              _obj.name = item.idString
              _obj.label = item.name // 表头显示
              _obj.align = 'left'
              _obj.field = item.idString // 渲染的字段
              _headerArr.push(_obj)
            })
            return _headerArr
          },
        },
        
        created: function () {
          // vue-i18n
          this.$i18n.locale = LANGUGE
          this.getTableHeaderData()
          this.getSelectionData()
          this.getTableData()
        },
        watch: {
          selection: function(selection) {
            // console.log(selection);
          }
        },
        methods: {
          getTableHeaderData: function () {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/stage/getCalssall',
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.headerData = data.rows
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              
            })
          },
          getTableData: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/stage/getMapJuZhuang',
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.data = data.rows
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              
            })
          },
          getSelectionData: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/classifyCustom/formMaterielTypeAndPhaseFlowSelect'
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                var _str = ''
                that.selection = []
                data.rows.map(function(item) {
                  _str = item.phaseFlowId + '-' + item.materielTypeId
                  that.selection.push(_str)
                }) 
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err, '获取已选择数据捕获到异常！')
            })
          },
          saveHandler: function() {
            var that = this
            if ( this.selection.length > 0) {
              this.btnLoading = true
              axios({
                method: 'post',
                url: '/manager/new/classifyCustom/formMaterielTypeAndPhaseFlow',
                data: {
                  idString: this.selection.join(',')
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('保存成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.getTableHeaderData()
                that.getSelectionData()
                that.getTableData()
              })
              .catch(function(err) {

              })
            } else {
              this.$q.notify({
                message: this.$t('请勾选至少一项后再保存哦'),
                icon: 'warning',
                type: 'warning',
                position: 'top-right'
              })
            }
          }
        }
      })
    </script>
  </body>
</html>
